<!doctype html>
<html ng-app="escad">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

  <title>ESCAD Client V0.1</title>

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ng-grid/2.0.7/ng-grid.min.css">
  <link rel="stylesheet" href="./escad.css">

  <link rel="icon" type="image/x-icon" href="./favicon.ico">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
  <link type="image/x-icon" href="./favicon.ico">
</head>

<body ng-controller="mainController">

  <div class="global_menue">
    
    <div>
      <button type="button" class="btn btn-primary btn-lg" ng-click="refreshSymbols()">Sync</button>
      <button type="button" class="btn btn-primary btn-lg" ng-click="open('lg')">New</button>
      <button type="button" class="btn btn-primary btn-lg" ng-click="open('sm')">Export</button>
      <button type="button" class="btn btn-primary btn-lg" ng-click="refreshSymbols()">Load</button>
      <button class="btn btn-default btn-lg" style="background-color: rgb(49, 182, 207);" ng-click="isCollapsed = !isCollapsed">Messages</button>
    </div>

    <div class="filter_select">
      <label>Filter:</label>
      <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseSymbolSemantic'">Symbol</label>
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseRelationSemantic'">Relation</label>
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseAttributSemantic'">Attribut</label>
      </div>
      <div class="btn-group">
	<input type="text" ng-model="selectedSemantic" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
      </div>

      <label>Depth:</label>
      <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseSymbolSemantic'">All</label>
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseRelationSemantic'">1</label>
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseAttributSemantic'">2</label>
      </div>

      <label>Weight:</label>
      <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseSymbolSemantic'">All</label>
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseRelationSemantic'">0-10</label>
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'BrowseAttributSemantic'">11-100</label>
      </div>
    </div>    

    <div collapse="isCollapsed">
      <div id="MessageArea" class="" ng-model="Messages">{{Messages}}</div> 
    </div>
  </div>
  
  <div class="data-area">
    <div class="symbol-area">
      <h1>Symbols</h1>
      <div class="symbol-menue container-fluid">
	<button type="button" class="btn btn-primary" ng-click="open()">New</button>
	<button type="button" class="btn btn-primary" ng-click="deleteSymbol()">Delete</button>
	<button type="button" class="btn btn-primary" ng-click="editSymbol()">Edit</button>
	<button type="button" class="btn btn-primary" ng-click="activateSymbol()">Activate</button>
      </div>
      <div class="symbol-list">
        <div class="gridStyle" ng-grid="symbolGrid"></div>
      </div>
    </div>
    
    <div class="relation-area">
      <h1>Relations</h1>
      <div class="relation-menue container-fluid">
	<button type="button" class="btn btn-primary" ng-click="newRelation()">New</button>
	<button type="button" class="btn btn-primary" ng-click="deleteRelation()">Delete</button>
	<button type="button" class="btn btn-primary" ng-click="editRelation()">Edit</button>
      </div>
      <div class="relation-list">
	<div class="gridStyle" ng-grid="relationGrid"></div>
      </div>
    </div>

    <!-- MODAL DIALOGS -->
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
	<h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
	<ul>
	  <li ng-repeat="item in items">
            <a ng-click="selected.item = item">{{ item }}</a>
	  </li>
	</ul>
	Selected: <b>{{ selected.item }}</b>
      </div>
      <div class="modal-footer">
	<button class="btn btn-primary" ng-click="ok()">OK</button>
	<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
      </div>
    </script>

  </div>


  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
  <script src="//cdn.jsdelivr.net/angular.ng-grid/2.0.7/ng-grid.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="./webclient.js"></script>
</body>
</html>
